@charset 'UTF-8';
@import '../../config/scss/function.scss', '../../config/scss/config.scss';

.mine {
    // 子页导航
    .breadcrumb {
        background: none;

        li {
            a {
                font-size: $f3;
            }

            &:last-child {
                a {
                    color: $c1;
                }

                &:before {
                    content: '>';
                }
            }
        }
    }

    .mine-detail {
        min-height: 500px;
    }

    .left-side {
        background-color: $c14;
        cursor: default;
        padding-top: 30px;

        .brand-panel {

            .img-rounded {
              max-width: 100%;
              max-height: 50px;
            }

            .img-circle{
              width: 30px;
              height: 30px;
            }
        }

        .left-side-title {
            margin-top: -15px;

            h4 {
                font-size: $f3;

                i {
                    color: red;
                }
            }
        }

        .img-circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }

        .list-group-item {
            border: 0;
            background-color: $c14;
            padding: 5px 15px;
            margin-bottom: 5px;
            text-align: center;

            &.disabled {
                text-align: left;
                cursor: default !important;
            }

            &.active {
                background-color: $c1;
                border-radius: 15px;

                i[class^="icon-"] {
                    color: #fff;
                }
            }

            i[class^="icon-"] {
                color: $c2;
            }
        }
    }
    @media screen and (max-width: 767px) {
        .left-side {
            min-height: 650px;
        }
    }

    .right-side {
        padding-top: 30px;
        padding-bottom: 50px;

        #offcanvas {
            margin-bottom: 20px;

            &:hover {
                background-color: $c1 !important;
            }
        }
    }
    @media screen and (max-width: 767px) {
        .row-offcanvas {
            position: relative;
            -webkit-transition: all 0.25s ease-out;
            -o-transition: all 0.25s ease-out;
            transition: all 0.25s ease-out;
        }

        .row-offcanvas-right {
            right: 0;
        }

        .row-offcanvas-left {
            left: 0;
        }

        .row-offcanvas-right .sidebar-offcanvas {
            right: -50%;
            /* 6 columns */
        }

        .row-offcanvas-left .sidebar-offcanvas {
            left: -48%;
            // top: 20px;
            /* 6 columns */
        }

        .row-offcanvas-right.active {
            right: 50%;

            .sidebar-offcanvas {
                left: 0;
            }
            /* 6 columns */
        }

        .row-offcanvas-left.active {
            left: 50%;
            // .sidebar-offcanvas {
            //     left: 0%;
            // }
            /* 6 columns */
        }

        .sidebar-offcanvas {
            position: absolute;
            top: 0;
            // width: 50%;
            /* 6 columns */
        }

        .left-side {
            min-height: 500px;

            .img-person {
                text-align: center;

                .img-circle {
                    text-align: center;
                    float: none !important;
                }
            }

            .left-side-title {
                text-align: center;
            }
        }
    }
}
